<script>
export default {
  name: "BtnSearchInput",
  data() {
    return {}
  },
  props: {
    // 只读，不能修改，接收从父组件传递过来的value值
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: "请在此输入搜索关键词"
    },
  },
  methods: {
    handleInput(event) {
      // 触发自定义绑定在自己身上的input事件，并且把从van-search输入框收到的value值传递给父组件
      this.$emit('input', event.detail)
    },
    onClick() {
      this.$emit('btn-fun', this.value)
    }
  },
}
</script>

<template>
  <!--传递父组件的value给van-search组件，并接收来自van_search组件的van_search_value给父组件-->
  <!--这里不能使用v-model='value'，因为这相当于直接修改只读的value-->
  <!--当van-search组件触发自定义input事件的时候，调用handleInput方法，handleInput方法再去触发SearchInput组件的自定义input事件-->
  <!--把来自van-search组件的van_search_value传递给SearchInput组件的父组件，相当于实现了一次孙传父-->
  <van-search
      :placeholder="placeholder"
      :value="value"
      @change="handleInput"
      use-action-slot
  >
    <template #action>
      <div class="btn" @click="onClick">搜索</div>
    </template>
  </van-search>
</template>

<style lang="less">
.btn {
  background-color: #c21401;
  color: #fff;
  padding: 0 20px;
  border-radius: 0 5px 5px 0;
  margin-right: 10px;
}
</style>
